<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('志愿者顾问详情')" />
    <style>
        /*基本信息表单布局*/
        .information
        {
            padding-top: 50px;
            padding-bottom: 100px;
            display: inline;
        }
        /*隐藏参加的活动页面*/
        .activities
        {
            display: none;
        }
    </style>
</head>
<body class="white-bg">
    <div class="container-div">
        <!--选择页面按钮-->
        <div class="btn-group-sm button" id="button" role="group">
            <a class="btn btn-white" id="toolbar1" onclick="showInformation()">基本信息</a>
            <a class="btn btn-white" id="toolbar2" onclick="showActivities()">参与的活动</a>
        </div>
        <!--志愿者顾问基本信息 -->
        <div class="col-sm-12 select-table information" id="information">
            <form class="form-horizontal m" id="form-advisermanage-information" th:object="${vtspAdviserManage}">
            <input name="adviserId" th:field="*{adviserId}" type="hidden">
            <div class="col-md-8">
                <div class="row">
                    <div class="form-group col-md-6">
                        <p>顾问编号：<span th:text="*{adviserCode}">adviserCode</span></p>
                    </div>
                    <div class="form-group col-md-6">
                        <p>姓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名：<span th:text="*{adviserName}">adviserName</span></p>
                    </div>
                </div>
                <div class="row">
                    <div class="form-group col-md-6">
                        <p>出生日期：<span th:text="${#dates.format(vtspAdviserManage.adviserBirthday, 'yyyy-MM-dd')}">adviserBirthday</span></p>
                    </div>
                    <div class="form-group col-md-6">
                        <p>职&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;务：<span th:text="*{adviserJob}">adviserJob</span></p>
                    </div>
                </div>
                <div class="row">
                    <div class="form-group col-md-6">
                        <p>职&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;称：<span th:text="${@dict.getLabel('adviser_title',vtspAdviserManage.adviserTitle)}">adviserTitle</span></p>
                    </div>
                    <div class="form-group col-md-6">
                        <p>联系电话：<span th:text="*{adviserPhone}">adviserPhone</span></p>
                    </div>
                </div>
                <div class="row">
                    <div class="form-group col-md-6">
                        <p>邮&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;箱：<span th:text="*{adviserEmail}">adviserEmail</span></p>
                    </div>
                    <div class="form-group col-md-6">
                        <p>单位名称：<span th:text="*{workplaceName}">workplaceName</span></p>
                    </div>
                </div>
                <div class="row">
                    <div class="form-group col-md-6">
                        <p>学&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;历：<span th:text="${@dict.getLabel('degree',vtspAdviserManage.adviserDegree)}">adviserDegree</span></p>
                    </div>
                    <div class="form-group col-md-6">
                        <p>所 在 地：<span th:text="*{volunteerArea}">volunteerArea</span></p>
                    </div>
                </div>
                <div class="row">
                    <div class="form-group col-md-6">
                        <p>创建时间：<span th:text="${#dates.format(vtspAdviserManage.createTime, 'yyyy-MM-dd')}">createTime</span></p>
                    </div>
                    <div class="form-group col-md-6">
                        <p>创 建 人：<span th:text="*{createBy}">createBy</span></p>
                    </div>
                </div>
                <div class="row">
                    <div class="form-group col-md-6">
                        <p>状&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;态：<span th:text="${@dict.getLabel('sys_state_id',vtspAdviserManage.memberState)}">memberState</span></p>
                    </div>
                </div>
            </div>
            <!--照片-->
            <div class="col-md-4">
                <img src="" width="100px" height="125px"/>
            </div>
        </form>
        </div>

        <!--志愿者顾问参与的活动-->
        <div class="col-sm-12 select-table table-striped activities" id="activities">
            <table id="bootstrap-table">
                <thead>
                    <tr>
                        <th data-formatter="fm_rowIndex" data-align="center">序号</th>
                        <th data-field="activityId" data-align="center">活动编号</th>
                        <th data-field="activityName" data-align="center">活动名称</th>
                        <th data-field="typeName" data-align="center">活动类型</th>
                        <th data-field="activityTime" data-align="center">活动时间</th>
                        <th data-field="activityArea" data-align="center">活动区域</th>
                    </tr>
                </thead>
            </table>
        </div>
    </div>
    <th:block th:include="include :: footer" />
    <script th:inline="javascript">
        var prefix = ctx + "vtsp/advisermanage";                //志愿者顾问管理
        var adviserId = [[${adviserId}]];

        //初始化表格参数
        $(function()
        {
            var options =
                {
                    url: prefix + "/detail/" + adviserId,   //详情
                };
            $.table.init(options);
        });

        /*通过功能按钮：基本信息、参与的活动，获取点击事件*/
        //显示基本信息界面，隐藏参与的活动界面
        function showInformation()
        {
            //获取Id
            var information = document.getElementById("information");
            var activities = document.getElementById("activities");
            //修改display属性
            button.style.display = "inline";
            information.style.display = "inline";
            activities.style.display = "none";
        }
        //显示参与的活动界面，隐藏基本信息界面
        function showActivities()
        {
            //获取Id
            var information = document.getElementById("information");
            var activities = document.getElementById("activities");
            //修改display属性
            button.style.display = "inline";
            information.style.display = "none";
            activities.style.display = "inline";
        }
    </script>
</body>
</html>